
<template>
    <div class="card-header" style="margin-bottom:12px;">
        <span class="card-title">显卡出租率</span>
        <a-range-picker :value="hackGpuValue || gpuValue" :disabled-date="disabledGpuDate" class="card-opt"
            @change="onChangeGpu" @openChange="onOpenChangeGpu" @calendarChange="onCalendarChangeGpu" />
    </div>

    <div>实时：<span>{{ data.currentCardSaleRate }} %</span></div>

    <div class="card-content" style="height:256px;">
        <div id="charts" ref="charts" style="width:100%;height:100%;"></div>
    </div>
</template>

<script setup>
import * as echarts from 'echarts';
import { ref, onMounted } from 'vue'
import { machineSaleApi } from '@/api/modules/api.owner'
import dayjs from 'dayjs';

// 显卡出租率日期选择
const gpuDates = ref([]);
const gpuValue = ref([]);
const hackGpuValue = ref();

// 初始默认当前一个月
gpuValue.value = [dayjs().subtract(30, 'day'), dayjs()]

const disabledGpuDate = current => {
    if (!gpuDates.value || gpuDates.value.length === 0) {
        return false;
    }
    const tooLate = gpuDates.value[0] && current.diff(gpuDates.value[0], 'days') > 31;
    const tooEarly = gpuDates.value[1] && gpuDates.value[1].diff(current, 'days') > 31;
    return tooEarly || tooLate;
};
const onOpenChangeGpu = open => {
    if (open) {
        gpuDates.value = [];
        hackGpuValue.value = [];
    } else {
        hackGpuValue.value = undefined;
    }
};
const onChangeGpu = async (val) => {
    gpuValue.value = val;
    await getMachineSale()
    init()
};
const onCalendarChangeGpu = val => {
    gpuDates.value = val;
};

// 初始化表格
let myChart = null
const charts = ref()
function init() {
    myChart = echarts.init(charts.value);
    let option = {
        color: ['#4DCB73'],
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'cross',
                label: {
                    backgroundColor: '#6a7985'
                }
            }
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: 50,
            containLabel: true
        },
        xAxis: [
            {
                type: 'category',
                // boundaryGap: false,
                data: data.value.cardSaleRateX,
            }
        ],
        yAxis: [
            {
                type: 'value',
                axisLabel: {
                    formatter: (val) => {
                        return val + '%';
                    },
                },
            }
        ],
        series: [
            {
                type: 'line',
                stack: 'Total',
                areaStyle: {},
                smooth: true,
                emphasis: {
                    focus: 'series'
                },
                areaStyle: {
                    opacity: 0.8,
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        {
                            offset: 0,
                            color: 'rgba(77, 203, 115, 0.40)'
                        },
                        {
                            offset: 1,
                            color: 'rgba(77, 203, 115, 0.00)'
                        }
                    ])
                },
                data: data.value.cardSaleRateY
            },
        ]
    };

    option && myChart.setOption(option);
}

/**
 * 页面初始化
 */
onMounted(async () => {
    await getMachineSale()
    init()
});

const data = ref({})
const getMachineSale = async () => {
    const params = {
        startDate: dayjs(gpuValue.value[0]).format('YYYY-MM-DD') || '',
        endDate: dayjs(gpuValue.value[1]).format('YYYY-MM-DD') || '',
    }
    const res = await machineSaleApi(params)
    if (res.code != 0) {
        return
    }

    const cardSaleRateX = res.data.cardSaleRateX || []
    const cardSaleRateY = res.data.cardSaleRateY || []
    data.value.cardSaleRateX = cardSaleRateX.map(item => {
        return dayjs(item).format('YYYY-MM-DD')
    })

    data.value.cardSaleRateY = cardSaleRateY.map(item => {
        return (item * 100).toFixed(2)
    })
    data.value.currentCardSaleRate = res.data.currentCardSaleRate
}


</script>

<style scoped lang="scss">
.card-header {
    display: flex;
    align-items: center;
    margin-bottom: 24px;

    .card-title {
        font-weight: 550;
        color: #223354;
        margin-right: 20px;
    }

    .card-opt {
        margin-left: auto;
    }
}

.card-content {
    display: flex;
}
</style>
